<template>
    <!--  -->
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
                class="demo-ruleForm">
                <el-form-item label="歌曲名字" prop="songName">
                    <el-input v-model="ruleForm.songName" autocomplete="off" />
                </el-form-item>
                <el-form-item label="歌词" prop="geci">
                    <el-input v-model="ruleForm.geci" autocomplete="off" />
                </el-form-item>
                <el-form-item>
                    <el-upload
                        ref="upload"
                        v-model:file-list="fileList"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :auto-upload='false'
                        :limit="1"
                        :on-exceed="handleExceed"
                        >
                        <el-icon ><Plus /></el-icon>
                    
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-form>
    
  
    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import { reactive,ref,watch } from 'vue'
  import { Plus } from '@element-plus/icons-vue'
  import type { UploadProps, UploadUserFile,UploadRawFile,UploadInstance } from 'element-plus'
  import emitter from "@/utils/emitter";
  //是否显示上传图标
  const disabled = ref(true)
  //上传的文件信息
  const fileList = ref<UploadUserFile[]>([ ])
  //绑定的上传组件
  const upload = ref<UploadInstance>()

  //文件预览所需地址
  const dialogImageUrl = ref('')
  //是否弹窗
  const dialogVisible = ref(false)
  //删除时候会触发的方法
  const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
  }
  //图片预览大图的方法
  const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
  }
  watch(fileList,(newVal:any,oldVal:any)=>{
    console.log('-----------------start---------------')
    console.log(newVal)
    console.log(oldVal)
    console.log('-----------------end----------------')
  })
  //超出上传数量时触发的方法
  const handleExceed: UploadProps['onExceed'] = (files) => {
    //"!" 强制链式调用
    //替换预览图片
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    upload.value!.handleStart(file)

    //用来保存图片，用以上传
    fileList.value.splice(0,1,file)
  }
  //--------------------------表单操作-----stat------
  import type { FormInstance, FormRules } from 'element-plus'
import axiosHttp from '../../http/AxiosUtil.js'


const ruleFormRef = ref<FormInstance>()


const validateName = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入歌曲名字！'))
    } else {
        callback()
    }
}
const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入歌词'))
    } else {
        callback()
    }
}

const ruleForm = reactive({
    songName: '',
    geci: '',
})

const rules = reactive<FormRules<typeof ruleForm>>({
    songName: [{ validator: validateName, trigger: 'blur' }],
    geci: [{ validator: validatePass, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log('成功提交！')
             axiosHttp.post('/songs/saveSongs',{
                songName:ruleForm.songName,
                geci:ruleForm.geci,
                //指定上传的图片，raw不可省略
                fm:fileList.value[0].raw
             },{
                headers:{
                    'Content-Type': 'multipart/form-data',
                }
             })
             .then(response=>{
                ElMessage.info(response.data)
                emitter.emit("cancelAdd", false);
             })
        } else {
            console.log('提交失败！')
            return false
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
  </script>
  